<template>
  <div class="container">
    <el-card class="box-card">
      <div class="top">
        <span class="explain">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" icon="el-icon-edit"  @click="addQuestion" size="small"
          >新增试题</el-button
        >
      </div>
      <!-- 表单 -->
      <el-form label-width="80px">
        <!-- 第一行 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="学科" label-width="80px">
              <el-select
                v-model="query.subjectID"
                placeholder="请选择"

                @change="change"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" label-width="80px">
              <el-select v-model="query.catalogID" placeholder="请选择" >
                <el-option
                  v-for="item in directoryList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" label-width="80px">
              <el-select v-model="query.tags" placeholder="请选择" >
                <el-option
                  v-for="item in tagsList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字"  label-width="80px">
              <el-input placeholder="根据题干搜索" v-model="query.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="试题类型" label-width="80px">
              <el-select placeholder="请选择" v-model="query.questionType">
                <el-option label="单选" value="1"></el-option>
                <el-option label="多选" value="2"></el-option>
                <el-option label="填空" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" label-width="80px">
              <el-select placeholder="请选择"  v-model="query.difficulty">
                <el-option label="简单" value="1"></el-option>
                <el-option label="一般" value="2"></el-option>
                <el-option label="困难" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" label-width="80px">
              <el-select placeholder="请选择"  v-model="query.direction">
                <el-option label="o2o" value="1"></el-option>
                <el-option label="外包服务" value="2"></el-option>
                <el-option label="企业服务" value="3"></el-option>
                <el-option label="互联网金融" value="4"></el-option>
                <el-option label="企业咨询" value="5"></el-option>
                <el-option label="互联网" value="6"></el-option>
                <el-option label="电子商务" value="7"></el-option>
                <el-option label="其他" value="8"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" label-width="80px">
              <el-select placeholder="请选择" size="small" v-model="query.creatorID">
                <el-option label="超级管理员" value="1"></el-option>
                <el-option label="录入管理员" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="题目备注"  label-width="80px">
              <el-input v-model="query.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" label-width="80px">
              <el-input  v-model="query.shortName"></el-input>
            </el-form-item>
          </el-col>
          <!-- 省市二级联动 -->
          <el-col :span="6">
            <el-form-item label="城市">
              <!-- 省  -->
              <el-select
                placeholder="请选择"
                v-model="query.province"
                @change="handleProvince"
                filterable
                style="width: 48%; "
              >
                <el-option
                  v-for="item in citySelect.province"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <!-- 市  -->
              <el-select
                placeholder="请选择"
                v-model="query.city"
                filterable
                style="width: 48%; margin-left: 4%"
              >
                <el-option
                  v-for="item in citySelect.cityDate"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" >
            <el-form-item style="text-align: right">
              <el-button size="small" @click="clear">清除</el-button>
              <el-button size="small" type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- tab切换栏 -->
      <template>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="all"></el-tab-pane>
          <el-tab-pane label="待审核" name="0"></el-tab-pane>
          <el-tab-pane label="已审核" name="1"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
        </el-tabs>
      </template>
      <!-- 消息提示 -->
      <el-alert type="info" show-icon :closable="false" :title="cTitle">
      </el-alert>
      <!-- 表格 -->
      <el-table stripe style="width: 100%" :data="questionList">
        <el-table-column prop="number" label="试题编号" width="120"> </el-table-column>
        <el-table-column prop="subject" label="学科" width="120" >
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="120" >
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="120" :formatter="questionType">
        </el-table-column>
        <el-table-column prop="question" label="题干" width="300">
           <template slot-scope="scope">
              <div v-html="scope.row.question"></div>
            </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180" :formatter="addDate">
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="120" :formatter="difficulty">
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120"> </el-table-column>
        <el-table-column prop="chkState" label="审核状态" width="120" :formatter="chkType">
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="120"> </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="120"> </el-table-column>
        <el-table-column prop="publishState" label="发布状态" width="120" :formatter="publishState">
        </el-table-column>
        <el-table-column prop="name" label="操作" width="200" fixed="right" header-align="center">
          <template #default="{row}">
            <el-link type="primary" :underline="false" class="fs" @click="previewQuestion(row.id)"
              >预览</el-link
            >
            <!-- 审核  -->
            <el-link
              v-if="row.chkState === 0"
              type="primary"
              :underline="false"
              class="fs"
              @click="audit(row.id)"
              >审核</el-link
            >
            <el-link type="info" disabled class="fs" v-else>审核</el-link>
            <!-- 修改  -->
            <el-link class="fs" type="info" v-if="row.publishState === 1" disabled>修改</el-link>
            <el-link v-else type="primary" :underline="false" class="fs" @click="amend(row.id)"
              >修改</el-link
            >
            <!-- 上架下架 -->
            <el-link
              v-if="row.publishState === 0"
              type="primary"
              :underline="false"
              class="fs"
              @click="putaway(row.id)"
              >上架</el-link
            >
            <el-link v-else type="primary" :underline="false" class="fs" @click="soldOut(row.id)"
              >下架</el-link
            >
            <!-- 删除  -->
            <el-link type="info" disabled class="fs" v-if="row.publishState === 1">删除</el-link>
            <el-link
              type="primary"
              :underline="false"
              class="fs"
              v-else
              @click="delQuestion(row.id)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="  prev, pager, next,sizes, jumper"
        :total="counts"
        :current-page="query.page"
        :page-size="query.pagesize"
        @current-change="pageChange"
        @size-change="handleSizeChange"
        :page-sizes="[2, 5, 10, 20, 50]"
        style="margin-top: 20px; text-align: right;"
      >
      </el-pagination>
      <!-- 弹窗 -->
      <!-- 试题预览 -->
      <!-- 弹窗 -->
      <el-dialog title="题目预览" :visible="dialogVisible" width="900px" @close="closeDialog">
        <el-row :gutter="20" class="preview">
          <el-col :span="6"
            >【题型】：{{
              preview.questionType == 1 ? '单选题' : preview.questionType == 2 ? '多选题' : '简答题'
            }}</el-col
          >
          <el-col :span="6">【编号】：{{ preview.id }}</el-col>
          <el-col :span="6"
            >【难度】：{{
              preview.difficulty == 1 ? '简单' : preview.questionType == 2 ? '一般' : '困难'
            }}</el-col
          >
          <el-col :span="6">【标签】：{{ preview.tags }}</el-col>
        </el-row>
        <el-row :gutter="20" class="preview">
          <el-col :span="6">【学科】：{{ preview.subjectName }}</el-col>
          <el-col :span="6">【目录】：{{preview.directoryName }}</el-col>
          <el-col :span="6">【方向】：{{ preview.direction }}</el-col>
        </el-row>
        <hr />
        <div>
          【题干】:
        </div>
        <div style="color:blue" class="general" v-html="preview.question"></div>
        <div class="general check">
          <!-- 单选  -->
          <div v-if="preview.questionType == 1">
            <p>
              {{
                preview.questionType == 1
                  ? '单选题'
                  : preview.questionType == 2
                  ? '多选题'
                  : '简答题'
              }}
              选项:（以下选中的选项为正确答案）
            </p>
            <div v-for="item in preview.options" :key="item.id" style="padding: 8px 0px;">
              <el-radio v-model="preview.isChoice" :label="item.isRight" onclick="return false">{{ item.title }}</el-radio>
            </div>
          </div>
          <!-- 多选  -->
          <div v-else-if="preview.questionType == 2">
            <p>
              {{
                preview.questionType == 1
                  ? '单选题'
                  : preview.questionType == 2
                  ? '多选题'
                  : '简答题'
              }}
              选项:（以下选中的选项为正确答案）
            </p>
            <div v-for="item in preview.options" :key="item.id" style="padding: 8px 0px;">
              <el-checkbox :checked="item.isRight === 1 ? true : false" onclick="return false">{{
                item.title
              }}</el-checkbox>
            </div>
          </div>
          <!-- 简答  -->
          <div v-else></div>
        </div>
        <hr />
        <div class="general">
          【参考答案】：
          <el-button type="danger"  @click="isShow=!isShow">视频答案预览</el-button>
          <div v-show="isShow">
            <video :src="preview.videoURL" controls class="Video"></video>
          </div>
        </div>
        <hr />
        <div class="general">【答案解析】：
            <div style="display: inline-block;" v-html="preview.answer"></div>
        </div>
        <hr />
        <div class="general">【题目备注】：{{ preview.remarks }}</div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeDialog">关 闭</el-button>
        </div>
      </el-dialog>
      <!-- 审核  -->
      <el-dialog title="提示" :visible="auditVisible" width="400px" @close="closeAudit">
        <!-- 表单 -->
        <el-form>
          <el-form-item>
            <el-radio-group v-model="auditchk.chkState">
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="2">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-input
              type="textarea"
              placeholder="请输入审核意见"
              v-model="auditchk.chkRemarks"
            ></el-input>
          </el-form-item>
        </el-form>
        <span class="dialog-footer">
          <el-button @click="closeAudit">取 消</el-button>
          <el-button type="primary" @click="auditQusetion">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>choicePublish

<script>
import { simple } from '@/api/hmmm/subjects.js' // 学科
import { simple as simpleTags } from '@/api/hmmm/tags.js'
import { simple as simpleDirectory } from '../../api/hmmm/directorys.js' // 目录
import { choice, detail, choiceCheck, choicePublish, remove } from '@/api/hmmm/questions.js' // 精选题
import { publishType, difficulty, questionType, chkType } from '@/api/hmmm/constants.js' // 格式化
// import { html2Text } from '@/utils/index.js' // html转换文字
import { provinces, citys } from '@/api/hmmm/citys.js' // 省市
import dayjs from 'dayjs'
export default {
  data () {
    return {
      activeName: 'all', // tab切换栏
      subjectList: [], // 学科列表
      directoryList: [], // 二级目录
      tagsList: [], // 标签列表
      questionList: [], // 精选题库列表
      preview: {}, // 预览试题
      counts: 0,
      query: {
        page: 1, // 页码
        pagesize: 5, // 每页条数
        tags: null, // 标签名称
        subjectID: null, // 学科
        questionType: null, // 试题类型
        catalogID: null, // 目录
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null, // 省
        city: null // 市
      },
      citySelect: {
        province: [], // 省
        cityDate: [] // 市
      },
      dialogVisible: false, // 预览弹窗
      auditVisible: false, // 审核弹窗
      auditchk: {
        id: '', // 试题审核id
        chkState: 1, // 审核状态
        chkRemarks: '' // 审核意见
      },
      push: {
        id: '',
        publishState: 1
      }, // 上架题目
      sold: {
        id: '',
        publishState: 0
      }, // 下架
      isShow: false // 视频答案预览显示
    }
  },
  mounted () {
    this.getSubjectList() // 学科
    this.getQuestionList() // 题目列表
    this.getCityData() // 获取省市
  },
  methods: {
    // 题库列表
    async getQuestionList () {
      // const res = await choice(this.query)
      try {
        const { data: { items, counts } } = await choice(this.query)
        this.questionList = items
        this.counts = counts
      } catch (err) {
        console.log(err)
      }
    },
    // 新增试题 跳转页面
    addQuestion () {
      this.$router.push({
        path: 'new'
      })
    },
    // tab切换栏
    handleClick (tab) {
      if (tab.name === 'all') {
        this.query.chkState = null
        this.getQuestionList()
      } else {
        this.query.chkState = tab.name
        this.getQuestionList()
      }
    },
    // 获取学科列表
    async getSubjectList () {
      try {
        const { data: res } = await simple()
        this.subjectList = res
      } catch (err) {
        console.log(err)
      }
    },
    // 二级联动
    async change (id) {
      try {
        const { data: res } = await simpleDirectory({ subjectID: id }) // 获取目录简单列表
        this.directoryList = res
        const { data: res1 } = await simpleTags({ subjectID: id }) // 获取标签单列表
        this.tagsList = res1
      } catch (err) {
        console.log(err)
      }
    },
    // 清除筛选框
    clear () {
      this.query = this.$options.data().query
      this.getQuestionList()
    },
    // 搜索
    search () {
      this.getQuestionList(this.query)
    },
    // 提示框
    title () {
      return '数据一共' + this.counts + '条'
    },
    // 发布状态-> 格式化
    publishState (row) {
      const obj = publishType.find(item => item.value === row.publishState * 1)
      return obj ? obj.label : '未知'
    },
    // 题目难度-> 格式化
    difficulty (row) {
      const obj = difficulty.find(item => item.value === row.difficulty * 1)
      return obj ? obj.label : '未知'
    },
    // 题型-> 格式化
    questionType (row) {
      const obj = questionType.find(item => item.value === row.questionType * 1)
      return obj ? obj.label : '未知'
    },
    // 审核状态-> 格式化
    chkType (row) {
      const obj = chkType.find(item => item.value === row.chkState * 1)
      return obj ? obj.label : '未知'
    },
    // 格式化时间
    addDate (row) {
      return dayjs(row.addDate).format('YYYY-MM-DD HH:mm:ss')
    },
    // 分页
    pageChange (page) {
      this.query.page = page
      this.getQuestionList()
    },
    handleSizeChange (pagesize) {
      this.query.pagesize = pagesize
      this.getQuestionList()
    },
    // 获取省
    getCityData () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince (e) {
      this.citySelect.cityDate = citys(e)
      this.query.city = this.citySelect.cityDate[0]
    },
    // 预览题目
    async previewQuestion (id) {
      this.dialogVisible = true
      try {
        const { data: res } = await detail({ id: id })
        this.preview = res
      } catch (err) {
        console.log(err)
      }
    },
    // 关闭弹窗
    async closeDialog () {
      this.isShow = false
      this.dialogVisible = false
    },
    // 打卡审核弹窗
    async audit (id) {
      this.auditVisible = true
      this.auditchk.id = id
    },
    // 关闭审核弹窗
    closeAudit () {
      this.auditVisible = false
    },
    // 进行审核
    async auditQusetion () {
      if (this.auditchk.chkRemarks === '') {
        this.$message({
          showClose: true,
          message: '请输入审核意见',
          type: 'warning'
        })
      } else {
        await choiceCheck(this.auditchk)
        this.$message.success('审核成功')
        this.auditVisible = false
        this.getQuestionList()
      }
    },
    // 修改跳转
    amend (id) {
      this.$router.push({
        path: 'new',
        query: {
          id
        }
      })
    },
    // 上架下架
    putaway (id) {
      this.$confirm('您确认上架这道题吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.push.id = id
        await choicePublish(this.push)
        this.$message.success('上架成功')
        this.getQuestionList()
      })
    },
    soldOut (id) {
      this.$confirm('您确认下架这道题吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.sold.id = id
        await choicePublish(this.sold)
        this.$message.success('下架成功')
        this.getQuestionList()
      })
    },
    // 删除
    delQuestion (id) {
      this.$confirm('此操作将永久删除改题目，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id: id })
        this.$message.success('删除成功')
        //  优化
        if (this.subjectList.length === 1) {
          this.query.pagquerye--
          if (this.query.page <= 0) {
            this.query.page = 1
          }
        }
        this.getQuestionList()
      })
    }
  },
  computed: {
    cTitle () {
      return '数据一共  ' + this.counts + '  条'
    }
  }

}
</script>

<style lang="scss" scoped>
.el-card {
  margin-top: 10px;
  margin-left: 10px;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  .explain {
    font-size: 12px;
    color: pink;
  }
}
.el-row {
  margin-bottom: 0px;
  &:last-child {
    margin-bottom: 0;
  }
}
.preview {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-input {
  width: 100%;
}

.el-form-item .el-select {
  width: 100%;
}
.el-alert {
  margin-bottom: 20px;
}
.fs {
  font-size: 12px;
  margin: 0 5px;
}
.general {
  margin: 15px 0;
}
.Video {
  width: 400px;
  height: 300px;
  margin-top: 20px;
}
.hljs-built_in {
  color: #4ec9b0;
}
.dialog-footer {
  text-align: right;
}
</style>
